<template>
    <div id="member">
        <el-col :span="24" class="action-bar">
            <el-input v-model="searchText" placeholder="请输入关键字" style="width:300px"></el-input>
            <el-select
                style="margin-left:20px"
                v-model="circle"
                filterable
                remote
                :loading="loading"
                placeholder="请输入圈子名"
                @change="getCircle"
                :remote-method="getCircleList"
                size="medium"
                    >
                <div v-if="circleList.length!=0">
                    <el-option
                    v-for="(item) in circleList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
                </div>
            </el-select>
            <el-select v-model="postStatus" clearable placeholder="审核状态" style="margin:0 20px;">
                <el-option
                v-for="item in postStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
                <el-option
                        label="推荐帖"
                        value="recommend">
                </el-option>
            </el-select>
                <el-button type="primary" size="medium" @click="search">筛选</el-button>
                <el-button type="primary" size="medium" @click="sendPost">发帖</el-button>
        </el-col>
        <el-col class="action-bar screen">
                <el-checkbox label="浏览" name="browse" v-model="showColumns.browse"></el-checkbox>
                <el-checkbox label="帖子类型" name="postType" v-model="showColumns.postType"></el-checkbox>
                <el-checkbox label="置顶" name="setTop" v-model="showColumns.setTop"></el-checkbox>
                <el-checkbox label="匿名" name="anonymity" v-model="showColumns.anonymity"></el-checkbox>
                <el-checkbox label="发布时间" name="createdAt" v-model="showColumns.createdAt"></el-checkbox>
        </el-col>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="content"
                label="帖子内容"
                width="200"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                    <div @click.stop="toPostDetail(scope.row)">
                        <span style="cursor:pointer;color:#409EFF" v-html="scope.row.content" v-if="scope.row.content"></span>
                        <div style="cursor:pointer;color:#409EFF"  v-else>
                            查看内容
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="circle_name"
                label="所属圈子"
                width="100">
            </el-table-column>
            <el-table-column
                prop="good_number"
                label="点赞"
                width="100"
                >
            </el-table-column>
            <el-table-column
                width="100"
                prop="not_good_number"
                label="踩">
            </el-table-column>
            <el-table-column
                width="100"
                prop="comment_number"
                label="评论"
                >
            </el-table-column>
            <el-table-column
                prop="share_number"
                width="100"
                label="分享">
            </el-table-column>
            <el-table-column
                v-if="showColumns.browse"
                prop="page_views"
                label="浏览"
                width="100"
                >
            </el-table-column>
            <el-table-column
                v-if="showColumns.postType"
                prop="classify_name"
                label="帖子类型"
                width="100"
                >
            </el-table-column>
            <el-table-column
                    prop="status_name"
                    label="是否推荐"
                    width="100"
            >
                <template slot-scope="scope">
                    <div>
                        <el-tag type="info" v-if="scope.row.is_recommend == '0'">否</el-tag>
                        <el-tag v-else>是</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                v-if="showColumns.setTop"
                prop="status_name"
                label="置顶"
                width="100"
                >
                <template slot-scope="scope">
                    <div>
                        <el-tag type="info" v-if="!scope.row.on_top">否</el-tag>
                        <el-tag v-else>是</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                v-if="showColumns.createdAt"
                prop="created_at"
                label="发布时间"
                width="200"
                >
            </el-table-column>
            <el-table-column
                v-if="showColumns.anonymity"
                prop="address"
                label="匿名"
                width="100"
                >
                <template slot-scope="scope">
                    <div>
                        {{scope.row.no_name!=0?'是':'否'}}
                    </div>
                </template>
            </el-table-column>
            
            <el-table-column label="操作" width='143'>
                <template slot-scope="scope">
                    <el-select v-model='operation' style='width: 120px' placeholder="请选择操作">
                    <el-option value='选择操作'><el-button type='text' @click="deletePost(scope.row.id)">删帖</el-button></el-option>
                    <div v-show="scope.row.on_top==0">
                        <el-option value='选择操作' ><el-button type='text' @click="setTopPost(scope.row.id,true)">置顶</el-button></el-option>
                    </div>
                    <div v-show="scope.row.on_top!=0">
                        <el-option value='选择操作'><el-button type='text' @click="setTopPost(scope.row.id,false)">取消置顶</el-button></el-option>
                    </div>
                        <el-option v-if="scope.row.is_recommend == '0'" value='设置推荐'><el-button type='text' @click="setRecommend(scope.row.id)">设置推荐</el-button></el-option>
                        <el-option v-if="scope.row.is_recommend == '1'" value='取消推荐'><el-button type='text' @click="setRecommend(scope.row.id)">取消推荐</el-button></el-option>
                    <el-option value='选择操作'><el-button type='text' @click="setTopic(scope.row.id,true)">选为话题</el-button></el-option>
                    <el-option value='选择操作'><el-button type='text' @click="setTopic(scope.row.id,false)">取消话题</el-button></el-option>

                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="审核" width='200'>
                <template slot-scope="scope" v-if="scope.row.is_pass==0">
                    <el-button type="primary" size="small" @click="passArticle(scope.row.id)">通过</el-button>
                    <el-button type="danger" size="small" @click="denyArticle(scope.row.id)">拒绝</el-button>
                </template>
            </el-table-column>
            
        </el-table>
        <el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
			</div>
    </el-col>

		<el-dialog title="评分" :visible.sync="signatureVisible" @close="initData">
		</el-dialog>
    </div>
</template>
<script>
export default {
    name:'member',
    data() {
        return {
            signatureVisible:false,//查看个性签名弹窗状态
            searchText:'',
            userTypeId:'',//选中的用户id
            operation:'',//选中的表格操作

            circleList:[],
            circle:'',
            loading:false,

            postStatus:'',//通过状态
            postStatusOptions:[
                {label:'全部',value:''},
                {label:'待处理',value:0},
                {label:'通过',value:1},
                {label:'拒接',value:2},
            ],
            showColumns:{
                browse:false,//浏览
                setTop:false,//用户类型
                createdAt:false,//发布时间
                anonymity:false,
                postType:false,//帖子类型
                isRecommend:false
            },

            tableData: [{}],
            page:1,
            totalPage:0    
        }
    },
    methods: {
        getCircle(e){
            this.circle=e
        },
        async getCircleList(searchText){
            //获取圈子列表
            this.loading=true;
            let params={
                page:this.page,
                keyword:searchText,
                limit:100,
                
            }
            let res=await this.$api.getCircleList(
                params);
            if(res.data.level=='success'){
               this.circleList=res.data.data
            }
            this.loading=false
        },
        
        search(){
            this.page=1;
            this.getArticleList()
        },
        sendPost(){
            //发帖
            this.$router.push('SendPost')
        },
        async getArticleList(){
            //获取帖子列表
            let params={
                page:this.page,
                keyword:this.searchText,
                circle_id:this.circle,
                status:this.postStatus,
                limit:16,
            }
            let res=await this.$api.getArticleList(
                params);
            if(res.data.level=='success'){
                this.tableData=res.data.data;
                this.totalPage=res.data.page_info.total;
            }
        },
        pageChange(e){
			//翻页
			this.page=e;
			this.getArticleList();
        },
        toPostDetail(item){
            //跳转帖子详情
            this.$bus.$data.postItem=item;
            this.$router.push({name:'PostDetail'})
        },
        async deletePost(id){
            //删除帖子
            let judge=null;
            
            try {
              judge=  await this.$confirm('删除该帖子?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            if(judge!='confirm'){
                return
            }
            let res=await this.$api.delArticle({
                    article_id:id
                })
                 if(res.data.level=='success'){
                    this.$message({
                        type:'success',
                        message:res.data.message
                    })
                    this.getArticleList();
                }else{
                    this.$message({
                        type:'error',
                        message:res.data.message
                    })
                }
            console.log(judge)
        },
        async passArticle(id){
            //通过帖子
            let judge=null;
            
            try {
              judge=  await this.$confirm('通过该帖子?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            if(judge!='confirm'){
                return
            }
            let res=await this.$api.passArticle({
                    id:id
                })
                 if(res.data.level=='success'){
                    this.$message({
                        type:'success',
                        message:res.data.message
                    })
                    this.getArticleList();
                }else{
                    this.$message({
                        type:'error',
                        message:res.data.message
                    })
                }
        },
        async denyArticle(id){
            //通过帖子
            let judge=null;
            
            try {
              judge=  await this.$confirm('拒绝该帖子?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            if(judge!='confirm'){
                return
            }
            let res=await this.$api.denyArticle({
                    id:id
                })
                 if(res.data.level=='success'){
                    this.$message({
                        type:'success',
                        message:res.data.message
                    })
                    this.getArticleList();
                }else{
                    this.$message({
                        type:'error',
                        message:res.data.message
                    })
                }
        },
        async setRecommend(id){
            //设置帖子推荐
            let params={
                id:id
            }
            let res=await this.$api.setArticleRecommend(
                params);
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
                this.getArticleList()
            }
        },
        async setTopPost(id,flag){
            //置顶帖子
            let judge=null;
            let tit=flag?'置顶该帖子?':'取消置顶该帖子'
            try {
              judge=  await this.$confirm(tit, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            if(judge!='confirm'){
                return
            }
            if(flag){
                this.setArticleOnTop(id);
            }else{
                this.unSetArticleOnTop(id);
            }
            
            console.log(judge)
        },
        async setArticleOnTop(id){
            //置顶请求
            let res=await this.$api.setArticleOnTop({
                    article_id:id
                })
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
                this.getArticleList();
            }else{
                this.$message({
                    type:'error',
                    message:res.data.message
                })
            }
        },
        async unSetArticleOnTop(id){
            //取消置顶请求
            let res=await this.$api.unSetArticleOnTop({
                    article_id:id
                })
            if(res.data.level=='success'){
                this.$message({
                    type:'success',
                    message:res.data.message
                })
                this.getArticleList();
            }else{
                this.$message({
                    type:'error',
                    message:res.data.message
                })
            }
        },
        
        async setTopic(id,flag){
            //选为话题
            let judge=null;
            let tit=flag?'选为话题?':'取消话题'
            try {
              judge=  await this.$confirm(tit, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
                })
            } catch (error) {
                judge='cancel'
            }
            console.log(judge)
        },
        initData(){

        }

    },
    mounted() {
        this.getArticleList()
    },
}
</script>
<style lang="scss" scoped>
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
			margin: 10px 0px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
      }
      .task-form-text{
				color: #666666;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
		.executorList{
			display: flex;
			flex-wrap: wrap;
			div{
				margin:10px;
				border:1px solid #eee;
				border-radius: 5px;
				padding:5px 10px;
			}
		}
</style>